<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>中岚签证导航栏</title>
		<link rel="stylesheet" href="css/font-awesome.min.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
		<style>
			.one{
				display: flex;
				justify-content: space-around;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			.one ul{
				list-style: none;
			}
			.one ul li {
				display: inline-block;
				padding-left: 20px;
			}
			.one ul li a{
				color: black;
				text-decoration: none;
			}
			.one ul li a:hover{
				color: red;
			}
			.phone{
				width: 40px;
				height: 40px;
				border: 1px solid #aaa;
				border-radius: 3px;
				position: absolute;
				top: 10px;
				right: 5%;
				cursor: pointer;
				display: none;
				text-align: center;
				line-height: 40px;
				font-size: 30px;
				color: #888;
			}
			@media (max-width: 768px) {
				.one{
					justify-content: flex-start;
				}
				.last a{
					display: none;
				}
			}
			@media(max-width: 480px) {
				.one nav{
					position: absolute;
					top: 60px;
					left: 0;
					width: 100%;
					display: none;
				}
				.one ul li{
					display: block;
					padding-left: 0;
					padding-bottom: 5px;
				}
				.one ul li a{
					display: inline-block;
					background: red;
					padding: 5px;
					text-align: center;
					width: 100%;
				}
				.one ul li a:hover{
					color: white;
				}
				.phone{
					display: block;
				}
			}
		</style>
	</head>
	<body>
		<script>
			$(function(){
				$(".phone").click(function(){
					$(".one nav").slideToggle();
				})
				$(window).resize(function(){
					if($(this).width()>480){
						$(".one nav").show();
					}
				})
			})
		</script>
		<header> 
			<div class="one">
				<div><img src="img/12-logo1.png" alt=""></div>
				<nav>
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">签证指南</a></li>
						<li><a href="#">签证加急</a></li>
						<li><a href="#">签证服务</a></li>
						<li class="last"><a href="#">签证咨讯</a></li>
						<li class="last"><a href="#">资料下载</a></li>
					</ul>
				</nav>
			</div>
			<div class="phone">
				<i class="fa fa-bars"></i>
			</div>
		</header>
	</body>
</html>
